<template>
  <div style="display: flex; height: 100vh">
    <div style="width: 150px">
      <f-anchor v-bind="options" scrollContainer="form"></f-anchor>
    </div>
    <div style="flex: 1; overflow-y: scroll; height: 100vh" id="form">
      <div v-for="item in options.links">
        <div :id="item.id">{{ item.title }}</div>
        <div style="height: 400px"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const options = reactive({
  links: [
    { title: '测试1', id: 'a' },
    { title: '测试2', id: 'b' },
    { title: '测试3', id: 'c' },
    { title: '测试4', id: 'd' },

    { title: '测试5', id: 'a1' },
    { title: '测试6', id: 'b2' },
    { title: '测试7', id: 'c3' },
    { title: '测试8', id: 'd4' }
  ]
});
</script>
